<template>
	<!--核销结果显示页-->
	<view :class="config.style">
		<FullscreenLoading :loading="loading" :config="config"></FullscreenLoading>
		<!-- #ifdef H5-->
		<Top :config="config"></Top>
		<!-- #endif -->
		<view class="main-section top">
			<view class="user-section">
				<view class="avatar">
					<image class="image" :src="data.user_info.avatar"></image>
				</view>
				<view class="nickname text-ellipsis-2">
					{{data.user_info.nickname}}
				</view>
			</view>
			
			<view class="title">
				课程
			</view>
			<view class="offline-section">
				<view class="content">
					<view class="cover">
						<image mode="widthFix" :src="data.products_info.cover_200" class="image"></image>
					</view>
					<view class="info">
						<view class="title text-ellipsis-2">{{data.products_info.title}}</view>
						<view class="description">
							<text>{{data.products_info.description}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="title">
				课节
			</view>
			<view class="lesson-section text-ellipsis">
				{{data.lessons.title}}
			</view>
			
			<view class="title">
				时间/地址
			</view>
			<view class="time-and-address">
				<view class="time">
					<view class="icon">
						<text class="iconfont">&#xe60e;</text>
					</view>
					<view class="info">
						{{data.lessons.start_time_str}}
					</view>
				</view>
				<view class="address">
					<view class="icon">
						<text class="iconfont">&#xe633;</text>
					</view>
					<view class="info text-ellipsis">
						{{data.products_info.province}} {{data.products_info.district}} {{data.products_info.city}} {{data.products_info.address}}
					</view>
				</view>
			</view>
			
			<view class="status-section">
				<button type="default" size="default" disabled="true" class="disabled">
					<text>{{data.status_str}}</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	//全屏加载中
	import FullscreenLoading from '../../../components/muu-fullscreen-loading/muu-fullscreen-loading.vue'
	import Top from '../common/top.vue'
	
	export default {
		components: {
			FullscreenLoading,
			Top,
		},
		data() {
			return {
				loading: true,
				data: {},
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
		    //console.log(option); //打印出上个页面传递的参数。
			this.urlParams = option
			console.log(this.urlParams)
			Promise.all([this.getData()]).then(res => {
				//加载完成
				this.loading = false
			})
		},
		computed: {
			...mapState(['config'])
		},
		methods: {
			/**
			 * 获取课程详情数据
			 */
			getData: function(){
				let that = this
				return new Promise((resolve, reject) => {
					let params = this.urlParams
					let data = {}
						data.id = params.id
					//获取数据
					let url = '';
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/offline'
						data.action = 'action'
						//#endif
						//#ifdef H5
						url = 'entry/site/verification'
						data.action = 'action'
						data.m = 'muu_classroom_plugin_offline'
						//#endif
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.data = res.data.data
							}
							resolve(res.data)
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #f8f8f8;
		min-height: 100%;
		height: auto;
	}
	
	.user-section {
		padding: 80rpx 20rpx 20rpx 20rpx;
		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin: 0 auto;
			overflow: hidden;
			.image {
				width: 120rpx;
				height: 120rpx;
				display: block;
				z-index: 1;
			}
		}
		.nickname {
			text-align: center;
			color: #333;
			padding: 10rpx 20rpx;
			h3 {
				font-size: 28rpx;
			}
		}
		
	}
	
	.title {
		padding: 20rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: #000;
	}
	
	.offline-section {
		margin: 0 20rpx;
		background-color: #fff;
		box-shadow: 0 0 20px rgba(0,0,0,.05);
		border-radius: 10rpx;
		.content {
			background-color: #fff;
			padding: 5px;
			display: flex;
			flex-wrap: wrap;
			.cover {
				width: 180rpx;
				border-radius: 5px;
				overflow: hidden;
				.image {
					width: 100%;
					height: auto;
					display: block;
				}
			}
			.info {
				padding-left: 20rpx;
				.title {
					font-size: 30rpx;
					color: #000;
					font-weight: 600;
					height: 36px;
					line-height: 36rpx;
					padding: 0;
				}
				.description {
					color: #999;
					font-size: 24rpx;
				}
			}
		}
	}
	
	.lesson-section {
		margin: 0 20rpx;
		background-color: #fff;
		padding: 20rpx;
		font-size: 28rpx;
		box-shadow: 0 0 20px rgba(0,0,0,.05);
		border-radius: 10rpx;
	}
	
	.time-and-address {
		box-shadow: 0 0 20px rgba(0,0,0,.05);
		border-radius: 10rpx;
		margin: 0 20rpx;
		background-color: #fff;
		margin-bottom: 16rpx;
		font-size: 24rpx;
		color: #999;
		padding: 10rpx 0;
		.time {
			display: flex;
			padding: 10rpx 20rpx;
			
			.icon {
				width: 40rpx;
			}
			.info {
				flex: 1
			}
		}
		.address {
			display: flex;
			padding: 10rpx 20rpx;
			.icon {
				width: 40rpx;
			}
			.info {
				flex: 1
			}
		}
	}
	
	.status-section {
		padding: 20rpx;
		button {
			color: #fff!important;
		}
		.disabled {
			opacity: .6;
		}
	}
	
	.Blue {
		.status-section {
			button {
				background-color: $Blue;
			}
		}
	}
	.Green {
		.status-section {
			button {
				background-color: $Green;
			}
		}
	}
	.LightRed {
		.status-section {
			button {
				background-color: $LightRed;
			}
		}
	}
	.Orange {
		.status-section {
			button {
				background-color: $Orange;
			}
		}
	}
	.LightPink {
		.status-section {
			button {
				background-color: $LightPink;
			}
		}
	}
	.Magenta {
		.status-section {
			button {
				background-color: $Magenta;
			}
		}
	}
	

</style>
